<template>
    <el-input v-model="UserData.username" placeholder="请输入账号" maxlength="11" clearable />
    <el-input
        minlength="5"
        maxlength="16"
        v-model="UserData.password"
        placeholder="请输入密码"
        clearable
        show-password
        type="password"
    />
    <el-button type="success" style="margin-top: 10px;" round @click="login">登录</el-button>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
//引入自己封装的axios
import { MyAxios } from '../request/MyAxios';
//导入pinia容器仓库
import { useMainStore } from '../store/index';
//导入element
import { ElMessage } from 'element-plus'
//实例pinia
const userStore = useMainStore()

var UserData = reactive({
    username: 'admin',
    password: '123456'
})
const router = useRouter()
//点击登录
const login = async function () {
    var { data } = await MyAxios.post('/login', UserData)
    if (data.meta.status == 200) {
        ElMessage({
            message: '登陆成功',
            type: 'success',
        })
        router.push('/home')
        localStorage.setItem('userInfo',JSON.stringify(data.data))
        userStore.userToken()
        
    } else {
        ElMessage.error(data.meta.msg)
    }
}

</script>
<style>
.el-input {
    display: block;
    width: 300px;
    margin-top: 10px;
}
</style>